<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="refresh">
<head>
    <meta charset="UTF-8">
    <title>播放</title>
    <link type="text/css" rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/iconfont.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/musicbox.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/player.css}">
</head>
<!--子框架音乐-->
<body>
<!-- 播放器 -->
<div class="music-player">
    <!-- audio标签 -->
    <audio class="music-player__audio"autoplay></audio>
    <!-- 播放器主体 -->
    <div class="music-player__main">
        <!-- 模糊背景 -->
        <div class="music-player__blur"></div>
        <!-- 唱片 -->
        <div class="music-player__disc">
            <!-- 唱片图片 -->
            <div class="music-player__image">
                <img width="100%" src="" alt="">
            </div>
            <!-- 指针 -->
            <div class="music-player__pointer">
                <img width="100%" src="/image/music/music_tou.png" alt="">
            </div>
        </div>
        <!-- 控件主体 -->
        <div class="music-player__controls">
            <!-- 歌曲信息 -->
            <div class="music__info">
                <h3 class="music__info--title">...</h3>
                <span class="music__info--singer">...</span>
            </div>
            <!-- 控件... -->
            <div class="player-control">
                <div class="player-control__content">
                    <div class="player-control__btns">
                        <div class="player-control__btn player-control__btn--prev"><i class="iconfont icon-prev"></i></div>
                        <div class="player-control__btn player-control__btn--play"><i class="iconfont icon-play"></i></div>
                        <div class="player-control__btn player-control__btn--next"><i class="iconfont icon-next"></i></div>
                        <div class="player-control__btn player-control__btn--mode"><i class="iconfont icon-loop"></i></div>
                    </div>
                    <div class="player-control__volume">
                        <div class="control__volume--icon player-control__btn"><i class="iconfont icon-volume"></i></div>
                        <div class="control__volume--progress progress"></div>
                    </div>
                </div>

                <!-- 歌曲播放进度 -->
                <div class="player-control__content">
                    <div class="player__song--progress progress"></div>
                    <div class="player__song--timeProgess nowTime">00:00</div>
                    <div class="player__song--timeProgess totalTime">00:00</div>
                </div>

            </div>

        </div>
    </div>
    <!-- 歌曲列表 -->
    <div class="music-player__list">
        <ul class="music__list_content">
            <li class="music__list__item play">123</li>
            <li class="music__list__item">123</li>
            <li class="music__list__item">123</li>
        </ul>
</div>
    <audio  class="aaa" style="background: red;">111</audio>
</div>
    <script th:src="@{/bootstrap-3.3.7-dist/js/utill.js}"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/jquery/jquery.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/js/musicPlayer.js}"></script>

</body>
</html>